<template class="index_background">
  <div class="index_background">
    <el-collapse>
      <div class="divcss5">
      <h5 align="left">个人信息管理>修改密码</h5>
      </div>
        <el-form :model="Passform" status-icon :rules="passwordrules" ref="PassForm" label-width="100px"
                 class="demo-ruleForm">
          <el-form-item label="旧密码" prop="oldPassword" class="settinginput">
            <el-input type="password" v-model="Passform.oldPassword" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword" class="settinginput">
            <el-input type="password" v-model="Passform.newPassword" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="checkpass" class="settinginput">
            <el-input type="password" v-model="Passform.checkpass" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="btn" @click="stuChangePass('Passform')">确认修改</el-button>
          </el-form-item>
        </el-form>
    </el-collapse>
  </div>
</template>

<style>
.divcss5{
  margin:30px 0;
  color: rgb(144,144,144);
  }
.index_background{
   background:white;
   }
  .back2{
    background:tomato;
  }
  .lable{
    color: rgb(144,144,144);
    margin-top: 20px;
    margin-left: -400px;
    margin-bottom: 30px;
  }
  .center{
    margin-top: 100px;
    margin-left: 500px;
  }
  .demo-ruleForm {

    margin-bottom: 300px;
  }

  .set {
    width:500px;
    margin-top: 21px;
    font-size: 14px;
    color: #909399
  }

  .btn {
    background: rgb(24,144,255);
    color: white;
    position: relative;
    top: 30px;
    left: 200px;
  }

  .settinginput {
    width: 500px;
  }
</style>

<script>
  import fetch from '../api/fetch'
  export default {
    data() {

      var stucheckpass = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入新密码'))
        } else if (value === this.Passform.oldPassword) {
          return callback(new Error('新密码不能与原密码相同！'))
        } else {
          callback()
        }
      }

      var stuconfirmPass = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请再次输入新密码'))
        } else if (value !== this.Passform.newPassword) {
          callback(new Error('与新密码不一致!'))
        } else {
          callback()
        }
      }

      return {
        Passform: {
          username: "dulaoban",
          oldPassword: '',
          newPassword: '',
          checkpass:'',
        },
        passwordrules: {
          oldPassword: [{required: true, message: "请输入密码", trigger: 'blur'}],
          newPassword: [{required: true, validator: stucheckpass, trigger: 'blur'}],
          checkpass: [{required: true, validator: stuconfirmPass, trigger: 'blur'}]
        }
      }
    },
    methods: {
      stuChangePass(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            alert('调用');
            delete this.Passform.checkpass
            //  let { eid,opassword,npassword} = this.Passform
            fetch.stuChangePass(this.Passform).then(res => {
              if (res.data.code === 200) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
              }
              else {
                this.$message({
                  message: '修改失败，请注意原密码是否输入正确！',
                  type: 'warning'
                })
              }
            }).catch(e => {
              console.log(e)
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>

